<template>
    <div class="tab-bar-item" :class="colorStyle" @click="handleClick">
        <i :class="iconStyle"></i>
        <slot></slot>
    </div>
</template>

<script setup>
import { computed, inject } from 'vue'
import useParent from '@/hooks/useParent'
// import TabBar from './TabBar.vue'
const { parent, index } = useParent('TabBar')
// 如果索引值和active就添加choosed样式
// const active = inject('TabBar')
const colorStyle = computed(() => {

    return parent.props.modelValue === index.value ? 'choosed' : ''

})
const props = defineProps({
    class: {
        type: String,
        required: true
    }
})
const iconStyle = computed(() => {
    return `iconfont icon-${props.class}`
})
const handleClick = () => {
    // 将索引值传给父组件
    parent.setActive(index.value)
}
</script>

<style scoped>
@import'http://at.alicdn.com/t/c/font_4851841_xypzlh1oe.css';

.tab-bar-item {
    display: flex;
    /* line-height: 40px; */
    text-align: center;
    flex-direction: column;
    color: #666;
}

.choosed {
    color: red;
}
</style>